<template>
    <div class="DateView">
        <UserInfoCell :userInfo="user" />
        <van-cell is-link size="large"
            :key="index"
            :value="item.val"
            :title="item.title"
            :to="item.to"
            v-for="(item, index) in dataList"
        />
        <div class="bottom">
            <van-button 
                round 
                block 
                size="large" 
                type="primary"
                @click="logout"
            >退出登录</van-button>
        </div>
    </div>
</template>

<script>
    import UserInfoCell from "@/components/common/userInfoCell.vue";
    import { mapState } from "vuex";

    export default {
        name: "DataView",
        data() {
            return {
                user_id: '',
            };
        },
        components: {
            UserInfoCell,
        },
        computed: {
            ...mapState(['user']),
            dataList() {
                return [
                    { title: "修改头像", to: "modify_headImg" },
                    { title: "修改昵称", to: "modify_nickname" },
                    { title: "修改封面", to: "modify_cover" },
                    { title: "我的动态", to: `user_dynamic_home?user_id=${ this.user_id }` },
                ];
            }
        },
        methods: {
            logout() {
                document.cookie = `token=; path=/; max-age=${ 0 }; secure`;
                this.$router.push("/");
            }
        },
        created() {
            this.user_id = this.user._id;
        }
    };
</script>

<style lang="less" scoped>
    .bottom {
        padding-top: 0.625rem;
        margin: 0.625rem;
        box-sizing: border-box;
    }
</style>
